<template>
    <div>
        <div>
            <el-button size="small" type="primary" @click="show">点击选择图片</el-button>
        </div>
        <div class="img-box" v-if="showModal">
            <div class="top-line">
                <div class="title">图片管理器</div>
                <i class="el-icon-close" @click="close"></i>
            </div>
            <div style="" class="upload">
                <el-upload class="upload-demo" action="/api/upload" :on-success="handlePreview" :show-file-list="false">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </div>
            <div class="img-list">
                <div v-for="(item, index) in fileList" :key="index"
                    style="width: 100px; height: 100px;margin: 5px;border-radius: 5px;">
                    <i class="el-icon-circle-close close" @click="deleteImg(item.id)"></i>
                    <img :src="item.url" style="width:100px;height:100px" :alt="item.name" @click="blurImg(item.url)">
                    <div class="img-title">{{ item.name }}</div>
                </div>
            </div>
            <div>
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange">
                </el-pagination>
            </div>
        </div>
    </div>

</template>

<script>
import http from "@/utils/http.js"
export default {
    name: "ImageAdministration",
    props: {
        img: String,
    },
    data() {
        return {
            fileList: [
                { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
            ],
            page: 0,
            total: 0,
            showModal: false
        };
    },
    mounted() {
        // this.getList()
    },
    methods: {
        getList() {
            http.get("/api/img/list", {
                size: 18,
                page: this.page
            }).then(res => {
                this.fileList = res.data
                this.total = res.total
            })
        },
        handlePreview(file) {
            this.$message.success('上传成功')
        },
        deleteImg(id) {
            http.get("/api/img/delete", { id: id }).then(res => {
                if (res.code = 200) {
                    this.$message.success(res.message);
                    this.getList()
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        currentChange(e) {
            this.page = e - 1
            this.getList()
        },
        show() {
            this.showModal = true
        },
        close() {
            this.showModal = false
        },
        blurImg(e) {
            this.$emit('img', e);
            this.showModal = false
        }
    }
};
</script>
<style scoped>
.img-box {
    width: 690px;
    height: 500px;
    box-shadow: 0 0 25px #cac6c6;
    border-radius: 15px;
    background: #FFF;
    z-index: 999;
    position: absolute;
    top: 50px
}

.top-line {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
}

.title {
    font-weight: 700;
}

.upload {
    margin-left: 500px;
    margin-top: 10px;
}

.img-list {
    display: flex;
    flex-wrap: wrap;
}

.img {
    width: 100px;
    height: 100px;
    margin: 5px;
}

.img-title {
    background: #000;
    opacity: 0.6;
    color: #FFF;
    font-size: 12px;
    line-height: 20px;
    margin-top: -24px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
}

.close {
    position: absolute;
    color: #FFF;
    margin-left: 84px;
    background: #000;
    border-radius: 50px;
}
</style>
